<template>
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel key="1" header="步骤描述">
            <template #extra>
                <DeleteOutlined @click="deleteItem"/>
            </template>
          <!-- 使用 v-model 双向绑定 stepDescription 和 assertion -->
          <a-textarea :rows="7" v-bind:value="stepDescription" @input="updateStepDescription" placeholder="请输入步骤描述" />
          <a-input-group compact>
            <a-select style="width: 20%">
                <a-select-option value="Option1">包括</a-select-option>
                <a-select-option value="Option2">不包括</a-select-option>
            </a-select>
            <a-input v-bind:value="assertion" @input="updateAssertion" style="width: 80%" placeholder="请输入断言内容"/>
        </a-input-group>
        </a-collapse-panel>
      </a-collapse>
  </template>
  
  <script lang="ts" setup>
  import { ref, defineProps, defineEmits ,watch} from 'vue'
  import {
    DeleteOutlined
} from '@ant-design/icons-vue';


  const props = defineProps({
    id:{
      type:String,
      default:''
    },
    stepDescription: {
      type: String,
      default: ''
    },
    assertion: {
      type: String,
      default: ''
    }
  })
  
  // 定义事件用于向父组件发送更新 (通过 `update:modelValue` 来触发更新)
  const emit = defineEmits(['update:stepDescription', 'update:assertion','delete'])
  
  // 数据属性
  const cardTitle = ref("步骤")
  const activeKey = ref(["1"])  // 默认展开步骤描述
  
  // 双向绑定的属性
  const stepDescription = ref(props.stepDescription)
  const assertion = ref(props.assertion)
  
  // 监听值的变化并触发事件将更新值发送给父组件
  const updateStepDescription = (event: Event) => {
  const value = (event.target as HTMLTextAreaElement).value;
  emit('update:stepDescription', value); // 发送更新事件
};
  
const updateAssertion = (event: Event) => {
  const value = (event.target as HTMLInputElement).value;
  emit('update:assertion', value); // 发送更新事件
};


  const deleteItem = (event: Event) => {
  const value = props.id
  emit("delete", value); // 发送更新事件
};
  
  // 监听 prop 变化并同步到本地数据
  watch(() => props.stepDescription, (newVal) => {
    stepDescription.value = newVal
  })
  
  watch(() => props.assertion, (newVal) => {
    assertion.value = newVal
  })
  </script>
  
  <style scoped>
  /* 添加自定义样式 */
  </style>